<template>
	<view>
		<view class="imgs" >
			<image class="imgbg" :src='moivemsg.cover' mode="" style=""></image>
			<view class="imgsleft">
				<image :src='moivemsg.cover'></image>
			</view>
			<view class="imgsright" v-if="moivemsg.filmName != null">
				<view class="moivename">{{moivemsg.filmName}}</view>
				<view class="moivefen">评分：{{moivemsg.score}}</view>
				<view class="moivepeople">{{moivemsg.cast}}</view>
				<view class="moivetype">{{moivemsg.type}} {{moivemsg.duration}}分钟</view>
				<view class="moiveday">{{moivemsg.publishDate | times2}}上映</view>
				<view class="moivemain">{{moivemsg.introduction}}</view>
			</view>
		</view>
		<view>
			<u-tabs ref="Utabs" v-if="tabs.length != 0" :list="tabs" @click="click" lineColor='#FFBE53' :current="dayindex">
			</u-tabs>
		</view>
		<view class="ticketlist" v-for="(item,index) in tickets">
			<view class="ticketleft">
				<view class="tickettime">{{item.startTime | times}}</view>
				<!-- <view class="ticketquit">{{item.timestart散场}}</view> -->
			</view>
			<view class="ticketcenter">
				<view class="ticketlanguage">{{item.filmName}}</view>
				<view class="ticketroom">{{item.hallName}}</view>
			</view>
			<view class="ticketright">
				<view class="dan">￥</view>
				<view class="money">{{item.ticketPrice}}</view>
			</view>
			<view class="ticketbtn">
				<button class="buybtn" type="default" @click="jump(item)">购票</button>
			</view>
		</view>


	</view>
</template>

<script>
	import {
		getCinemadetail,

	} from '@/api/oil'
	export default {
		data() {
			return {
				bgimg:{
					// backgroundImage: '';
				},
				uSSwiper:'',
				tickets: [],
				moiveimgurl: '../../static/tabsIcon/dianyingimg.jpg',
				tabs: [
	
				],
				Cinemaid: null,
				moiveid:null,
				Cinemamsg: {},
				moivemsg: [], //电影院详情
				filename: null,
				filetime: null,
				fileman: null,
				daysdangqi: [], //当天排期
				moiveindex: 0, //选中电影
				dayindex: 0, //选中日期
				swiperCurrent: 0,
				longid:null,
				shortid:null,
			}
		},
		filters: {
			times(text) {
				let date = new Date(text*1000);
				let h = date.getHours(); // 时
				h = h < 10 ? ('0' + h) : h;
				let m = date.getMinutes(); // 分
				m = m < 10 ? ('0' + m) : m;
				return h +":"+ m
			},
			times2(text) {
				let date = new Date(text*1000);
				let y = date.getFullYear(); // 年
				let MM = date.getMonth() + 1; // 月
				MM = MM < 10 ? ('0' + MM) : MM;
				let d = date.getDate(); // 日
				d = d < 10 ? ('0' + d) : d;
				let h = date.getHours(); // 时
				h = h < 10 ? ('0' + h) : h;
				let m = date.getMinutes(); // 分
				m = m < 10 ? ('0' + m) : m;
				let s = date.getSeconds(); // 秒
				s = s < 10 ? ('0' + s) : s;
				// var timer =  y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
				var timer = y + '年' + MM + '月' + d + '日' + h + ':' + m;
				return timer
			}
		},
		onLoad(option) {
			// console.log(option)
			// cinemaid:影院id  moiveid:电影id
			this.Cinemaid = option.cinemaid;
			this.moiveid = option.moiveid;
			this.getCinemadetail(option.cinemaid);
			// this.Cinemaid = option.id;
		},
		created() {},
		methods: {
			click(item) {
				console.log(this.moivemsg.planList)
				// console.log(item.index, this.moivemsg[this.moiveindex].planList[item.index].cinemaPlanList.lenght);
				// // 当天排期
				this.tickets = [];
				// // setTimeout()
				// // this.$forceUpdate();
				for (let sss2 in this.moivemsg.planList[item.index].cinemaPlanList) {
					this.tickets.push(this.moivemsg.planList[item.index].cinemaPlanList[sss2])
					// console.log(this.moivemsg[this.moiveindex].planList[item.index].cinemaPlanList)
				}
				// console.log(this.tickets)
			},
			getCinemadetail(id) {
				getCinemadetail(id).then(res => {
					if (res.success == 1) {
						// console.log(res.data);
						this.longid = res.data.id;
						this.shortid = res.data.cinemaId;
						this.Cinemamsg = res.data;
						
						for (let sss in res.data.filmInfoList) {
							if(res.data.filmInfoList[sss].id == this.moiveid){
								this.moivemsg = res.data.filmInfoList[sss];
							}
						}
			
						console.log(this.moivemsg)
						this.tabs = [];
						// // 时间标签
						for (let sss1 in this.moivemsg.planList) {
							this.tabs.push({
								name: this.moivemsg.planList[sss1].time
							})
						}
						// // 当天排期
						for (let sss1 in this.moivemsg.planList) {
							this.daysdangqi.push(this.moivemsg.planList[sss1].cinemaPlanList)
						}
						this.tickets = this.daysdangqi[0];
					} else {
						uni.showToast({
							icon: 'none',
							title: res.message
						})
					}
				})
			},

			jump(item) {
				this.longid
				this.shortid
				console.log(item)
				uni.navigateTo({
					url: `./seat?longid=${this.longid}&shortid=${this.shortid}&featureAppNo=${item.featureAppNo}`
				})
			},




		}
	}
</script>

<style lang="scss" scoped>
	.headtop {
		padding: 32upx 20upx;

		// height: 400upx;
		// background-color: #007AFF;
		.studios {
			width: auto;
			font-size: 34upx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.9);
			line-height: 48upx;
		}

		.address {
			font-size: 28upx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.5);
			line-height: 40upx;
		}
	}

	.imgs {
		height: 388upx;
		width: 100%;
		// background-color: rgba(0, 0, 0, 0.2);
		display: flex;
		.imgbg{
			position: absolute;
			float: left;
			width: 100vw;
			z-index: -1;
			height: 388upx;
			filter: blur(0.4rem);
			background-color: rgba(0, 0, 0, 0.2);
		}
		.imgsleft {
			margin: 46upx;
			// margin-top: ;
			image {
				font-size: 0;
				width: 200upx;
				height: 290upx;
			}
		}

		.imgsright {
			margin-left: 70upx;

			.moivename {
				margin-top: 46upx;
				font-size: 34upx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(255, 255, 255, 0.69);
				line-height: 48upx;
			}

			.moivefen {
				font-size: 22upx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(255, 255, 255, 0.69);
				line-height: 32upx;
			}

			.moivepeople {
				margin-top: 22upx;
				font-size: 22upx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(255, 255, 255, 0.69);
				line-height: 32upx;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				line-clamp: 1;
				-webkit-box-orient: vertical;
			}

			.moivetype {
				font-size: 22upx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(255, 255, 255, 0.69);
				line-height: 32upx;
			}

			.moiveday {

				font-size: 22upx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(255, 255, 255, 0.69);
				line-height: 32upx;
			}

			.moivemain {
				width: 370upx;
				margin-top: 22upx;
				font-size: 22upx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(255, 255, 255,0.69);
				line-height: 32upx;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 3;
				line-clamp: 3;
				-webkit-box-orient: vertical;
			}
		}

		// /deep/ .u-swiper swipers .uni-swiper-slides{
		// 	inset:0upx 120upx !important 
		// }

	}


	/deep/ .uni-swiper-slides {
		inset: 0px 280upx !important;
	}

	/deep/ uni-swiper .uni-swiper-wrapper {
		overflow: visible !important;
	}

	.ticketlist {
		display: flex;
		// justify-content:space-around;
		border-top: 1upx solid rgba(0, 0, 0, 0.1);

		// background-color: #5AC725;
		.ticketleft {
			padding: 42upx 34upx;
			// background-color: #007AFF;
			// padding-left: 42upx;
			width: 90upx;

			.tickettime {
				font-size: 34upx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(0, 0, 0, 0.9);
				line-height: 48upx;
			}

			.ticketquit {
				font-size: 22upx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(0, 0, 0, 0.5);
				line-height: 32upx;
			}
		}

		.ticketcenter {
			padding: 42upx 10upx;
			// margin-left: 34upx;
			// background-color: #18BC37;
			width: 240upx;

			.ticketlanguage {
				font-size: 24upx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(0, 0, 0, 0.9);
				line-height: 34upx;
			}

			.ticketroom {
				padding-top: 14upx;
				font-size: 24upx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(0, 0, 0, 0.5);
				line-height: 34upx;
			}
		}

		.ticketright {
			width: 180upx;
			display: flex;

			// background-color: #8FDAFF;
			// margin-left: 200upx;
			.dan {
				color: #ED2525;
				font-size: 24upx;
				margin-top: 60upx;
			}

			.money {
				margin-top: 51upx;
				font-size: 34upx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #ED2525;
				line-height: 48upx;
			}
		}

		.ticketbtn {
			margin-right: 24upx;

			.buybtn {
				border-radius: 999rem;
				border: 1upx solid rgba(237, 37, 37, 1);
				margin-top: 51upx;
				// width: 32upx;
				font-size: 28upx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #ED2525;
				line-height: 40upx;
			}
		}
	}

	.moivemsg {
		background-color: #FFFFFF;
		// height: 200upx;
		width: 100%;
		padding: 10upx 0;

		.moivename {
			text-align: center;
			margin-top: 16upx;
			font-size: 34upx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 600;
			color: rgba(0, 0, 0, 0.9);
			line-height: 40upx;
		}

		.moiveoth {
			display: flex;
			justify-content: center;

			.moiveothtime {
				margin-right: 10upx;
				font-size: 22upx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(0, 0, 0, 0.5);
				line-height: 32upx;
			}

			.moivein {
				font-size: 22upx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(0, 0, 0, 0.5);
				line-height: 32upx;
			}

			.moiveothman {
				margin-left: 10upx;
				font-size: 22upx;
				max-width: 80%;
				height: 30upx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(0, 0, 0, 0.5);
				line-height: 32upx;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				line-clamp: 1;
				-webkit-box-orient: vertical;
				
			}
		}
	}
</style>
